<template>
	<v-container>
		<v-data-table :mobile-breakpoint="0" mobile-breakpointdense class="elevation-1" :items="data.list" :options="data.options" @update:options="data.update($event)" :headers="headers" :server-items-length="data.total" :loading="data.loading" hide-default-footer>
			<template v-slot:top>
				<v-toolbar flat color="white">
					<v-toolbar-title>{{name}}</v-toolbar-title>
					<v-spacer></v-spacer>
					<v-text-field label="搜索" v-model="s" class="ml-2" clearable></v-text-field>
					<v-text-field label="销量下限" v-model="minVolume" class="ml-2" type="number"></v-text-field>
					<v-text-field label="折扣率" v-model="minCouponRate" class="ml-2" type="number"></v-text-field>
					<v-btn color="success" @click="data.search()" class="ml-2">搜索</v-btn>
					<v-btn color="primary" @click="ipt" class="ml-2">导入</v-btn>
				</v-toolbar>
			</template>
			<template v-slot:item.pict_url="{item}">
				<img style="width:50px" :src="item.pict_url" />
			</template>
			<template v-slot:item.user_type="{item}">
				<span>{{['淘宝', '天猫'][item.user_type]}}</span>
			</template>
			<template v-slot:item.zk_final_price="{item}">
				¥{{item.zk_final_price}}
			</template>
			<template v-slot:item.coupon_amount="{item}">
				{{`满${item.coupon_start_fee}元减${item.coupon_amount}元`}}
			</template>
			<template v-slot:item.tools="{item}">
				<v-btn color="green" @click="open(item)" small text>领取</v-btn>
			</template>
			<template v-slot:footer v-if="data.totalPage>1">
				<v-divider></v-divider>
				<i-page class="pa-2" circle :value="data.options.page-1" @input="data.options.page=$event+1" :total="data.total"></i-page>
			</template>
		</v-data-table>
		
	</v-container>
</template>
<script>
export default {
	name: "MaterialList",
	props: {
		name: String,
	},
	data() {
		return {
			s: "",
			minVolume: 500,
			minCouponRate: 0.15,
			data: new utils.DataSource(this.query.bind(this))
		}
	},
	computed: {
		headers() {
			var types = ['淘宝', '天猫'];
			return [{
				value: "id",
				text: "#",
			}, {
				value: "pict_url",
				text: "商品图片",
				width: 84,
			}, {
				value: "title",
				text: "标题",
				width: 400,
			}, {
				value: "volume",
				text: "销量30",
				width: 72,
			}, {
				value: "user_type",
				text: "来源",
				width: 58,
			}, {
				value: "zk_final_price",
				text: "价格",
				width: 58,
			}, {
				value: "coupon_amount",
				text: "券",
			}, {
				value: "tools",
				text: '操作',
			}]
		}
	},
	methods: {
		query(query) {
			query = Object.assign(query, {
				s: this.s,
				minVolume: this.minVolume,
				minCouponRate: this.minCouponRate,
			})
			return this.$get('material/list', query)
		},
		async ipt() {
			let f = await utils.pick('application/xlsx')
			console.log(f)
			let form = new FormData()
			form.append('f', f)
			await this.$post('material/ipt', form)
			this.$toast.success('导入成功')
			this.$refs.table.search(0)
		},
		open(item) {
			window.open(item.coupon_share_url)
		}
	},
	mounted() {
		this.data.search()
	},
	components: {

	},
}
</script>
<style lang="less">
@import "~@/styles/define.less";
.views-material-list {
	padding: 1rem;
	max-width: 64rem;
	margin: 0 auto;
	> .header {
	}
}
</style>
